<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Web Stomp 测试工具</h3>
    </div>
    <div class="panel-body">
        <a href="http://www.json.com">链接信息如下:</a>
    </div>
    <table class="table" id="content">
        <th>时间</th><th>内容 </th>
    </table>
</div>
<script type="text/javascript">
    var wsUrl='ws://ip:port/ws';
    var queueRouterKey="/topic/*-topic";
	var account='accountName';
	var password='accountPassword';
	var virtual='/';
    function consoleInfo(content){
        $("#content").append("<tr><td>"+new Date()+"</td><td>"+content+"</td></tr>");
    }
    function consoleErr(content){
        $("#content").append("<tr class='danger'><td>"+new Date()+"</td><td>"+content+"</td></tr>");
    }
    function consoleSucc(content){
        $("#content").append("<tr class='success'><td>"+new Date()+"</td><td>"+content+"</td></tr>");
    }
    consoleInfo("初始化参数...");
    consoleInfo("准备连接至:"+wsUrl);
	consoleInfo("用户名:"+account);
	consoleInfo("密码:"+password);
	consoleInfo("routerKey:"+queueRouterKey);
    var ws = new WebSocket(wsUrl);
    var client = Stomp.over(ws);
    var on_connect = function() {
        client.subscribe(queueRouterKey, function (mess) {
            consoleSucc(mess.body);
        });
        consoleInfo('链接成功！');
    };
    var on_error =  function() {
        consoleErr('链接失败！');
    };
    client.connect(account, password, on_connect, on_error,virtual );

</script>
</body>

</html>

